<template>
  <header class="form-container save-page-container">
    <el-form ref="form" :model="guiZhang" :rules="rules" label-width="60px">
      <div class="header">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span v-text="title"></span>
        </div>
        <el-form-item class="btns">
          <el-button type="success" :loading="submitLoading" @click="submitForm('form')">保存</el-button>
          <el-button type="default" @click="goBack">返回</el-button>
        </el-form-item>
      </div>


      <el-row>
        <el-form-item label="标题:" prop="infoTitle">
          <el-input v-model.trim="guiZhang.infoTitle" placeholder="输入标题" />
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="时间:" prop="created">
          <el-date-picker
            v-model="guiZhang.created"
            type="date"
            placeholder="选择时间">
          </el-date-picker>
          <!--<el-date-picker
          v-model="dateArr"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :picker-options="pickerOptions"
          />-->
        </el-form-item>
      </el-row>

      <el-form-item prop="infoContent" label="内容:" style="margin-bottom: 30px;">
        <Tinymce ref="editor" v-model="guiZhang.infoContent" :height="400" />
      </el-form-item>

    </el-form>

  </header>
</template>

<script>
  import Tinymce from '@/components/Tinymce'
  import guiZhangAPI from '@/api/guiZhangZhiDu/guiZhangZhiDu'
  export default {
    name: 'GuiZhangCommon',
    components:{Tinymce},
    data() {
      const validContent = (rule,value,callback)=>{
        console.log()
        if(!value.trim()){
          this.$message.info('请输入内容')
          callback(new Error('请输入内容'))
        }else {
          callback()
        }
      }
      return {
        guiZhang: {
          infoId:this.$route.params.id,
          created: "",
          infoContent: "",
          infoTitle: ""
        },
        rules: {
          infoTitle: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          created: [
            { required: true, message: '请选择时间', trigger: 'change' }
          ],
          infoContent: [
            { validator: validContent, trigger: 'blur' }
          ],
        },
        submitLoading: false
      }
    },
    created() {
      if (this.guiZhang.infoId) {
        this.fetchData()
      }
    },
    computed:{
      title(){
        return this.guiZhang.infoId ? '规章制度修改' : '规章制度添加'
      }
    },
    methods: {
      fetchData() {
        guiZhangAPI.getById(this.guiZhang.infoId).then(res => {
          this.guiZhang = res
        }).catch(err => {
          console.log(err)
        })
      },
      goBack() {
        this.$router.back()
      },
      submitForm(form) {
        this.$refs[form].validate(valid => {
          if (!this.submitLoading && valid) {
            this.saveOrUpdate()
          }
        })
      },
      saveOrUpdate() {
        this.submitLoading = true
        // this.guiZhang.created = this._util.formatDateToString(this.guiZhang.created)
        const promise = this.guiZhang.infoId ? guiZhangAPI.update(this.guiZhang) : guiZhangAPI.save(this.guiZhang)
        promise.then(res => {
          console.log(res)
          this.submitLoading = false
          this.$message.success('保存成功')
          this.$router.push('/gui-zhang-zhi-du/list')
        }).catch(err => {
          this.submitLoading = false
          console.log(err)
        })
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
